<template>
  <Dialog :title="title" :visible.sync="innerVisible">
    <el-checkbox v-for="item in innerColumns" v-model="item.visible" :key="item.data" :label="item.label"/>
    <span slot="footer" class="dialog-footer">
      <el-button @click="innerVisible = false">取 消</el-button>
      <el-button type="primary" @click="makeSure">确 定</el-button>
    </span>
  </Dialog>
</template>
<script>
import Dialog from '@/components/Dialog'

export default {
  components: {
    Dialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      innerVisible: this.visible,
      innerColumns: this.$_.cloneDeep(this.columns),
      checkList: []
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      if (val) {
        this.innerColumns = this.$_.cloneDeep(this.columns)
        console.log(this.columns)
      }
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  methods: {
    makeSure() {
      this.innerVisible = false
      this.$emit('submit', this.innerColumns)
    }
  }
}
</script>
